.landing {

  /* base styles and > 770px height */
  .nav-hero-container {
    color: white;

    .hero-title {
      color: white;
      margin: 80px 0 0 0;
      padding: 0;
    }
    .hero-logo {
      height: 180px;
      margin: 98px 0 0 0;
      padding: 0;
    }
    .hero-lead {
      margin: 102px 0 0 0;
      padding: 0px;
    }
    .hero-down-arrow {
      display: inline-block;
      margin: 60px 0 20px 0;
      padding: 5px;
      cursor: pointer;
    }
  }

  /* < 550px height */
  @media (max-height: 550px){
    .nav-hero-container {
      .hero-title {
        margin: 30px 0 0 0;
      }
      .hero-logo {
        margin: 28px 0 0 0;
      }
      .hero-lead {
        margin: 32px 0 0 0;
      }
      .hero-down-arrow {
        margin: 20px 0 20px 0;
      }
    }
  }

  /* 550 - 770px height */
  @media (min-height: 550px) and (max-height: 770px) {
    .hero {
      height: calc(100vh - 70px);

      .container {
        height: 100%;
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
      }
    }

    .nav-hero-container {
      height: calc(100vh - 70px);
      min-height: 600px;

      .hero-title {
        position: absolute;
        top: calc(10% - 70px);
        transform: translate(0, -50%);
        text-align: center;
        width: 100%;
      }
      .hero-logo {
        position: absolute;
        left: 50%;
        top: calc(55% - 70px);
        transform: translate(-50%, -50%);
        margin:0;
      }
      .hero-lead {
        position: absolute;
        top: 70%;
        width: 100%;
        text-align: center;
        transform: translate(0, -50%);
        margin:0;
      }
      .hero-down-arrow {
        position: absolute;
        bottom: 75px;
        left: 50%;
        transform: translate(-50%, 0);
      }
    }
  }



  /* default styles */
  .section-content {
    padding: 20px 20px 20px 20px;

    p {
      font-weight: normal;
      font-size: 100%;
    }
  }

  .landing-image {
    padding-top: 10px;
    padding-bottom: 20px;
    max-height: 400px;
  }

  .jumbotron {
    margin: 0;
  }

  .traffic, .policy {
    background-color: white;
  }

  .resilience, .reporting, .resilience h2, .reporting h2 {
    background-color: #f5f5f5;
  }

  .btn.btn-floating.down-caret {
    position: relative;
    transform: none;
    bottom: 15px;
    left: 49%;
  }

  #doc-call {
    margin: 80px 0;
    padding:0;
    height:auto;

    .doc-call-title{
      margin:0;
      padding:0;
    }
    .doc-call-text{
      margin:20px 0 30px 0;
      padding:0;
    }
  }

  /* screens 1024px or larger */
  @media (min-width: $desktop-small) {
    .container-fluid {
      height: 400px;
      clear:both;
    }
    .landing-image {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      max-width: 55%;
      padding-right: 20px;
      padding-left: 20px;
    }
    .section-content {
      padding: 10% 0;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      float: right;
      width: 45%;

      h2 {
        font-size: 2rem;
        background: transparent !important;
        margin:0;
        padding:0;
      }
      p {
        padding:0;
        margin:15px 0 30px 0;
        font-size: 14px;
        line-height: 1.5;
      }
    }
  }

  /* screens 1440px or larger */
  @media (min-width: $desktop-large) {
    .jumbotron {
      padding-left: 200px;
      padding-right: 200px;
    }
  }
}